<template>
  <div class="catid-not-right">
    <h1>链接错误</h1>
    <div class="img-box">
      <img src="./assets/header.png" alt="">
    </div>
    <p>
      分享链接错误！<br />请联系客服获取正确链接。
    </p>
    <div class="qrcode-box" v-if="errorWxQrcode">
      <div>
        <img :src="errorWxQrcode" alt="">
      </div>
      <p>长按识别二维码<br />添加微信客服
      </p>
    </div>
    <div class="qrcode-box" v-else-if="errorQQ" @click="onQQ">
      <div>
        <img src="../../assets/img/error-qq-icon.jpg" alt="">
      </div>
      <p>在线QQ咨询</p>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      errorWxQrcode: s => s.errorWxQrcode,
      errorQQ: s => s.errorQQ
    })
  },
  mounted() {
    this.$hideLoading()
  },
  methods: {
    // qq客服
    onQQ() {
      window.location.href =
        'http://wpa.qq.com/msgrd?v=3&uin=' +
        this.errorQQ +
        '&site=qq&menu=yes'
    },
  }
}
</script>

<style scoped lang="scss">
.catid-not-right {
  min-height: 100vh;
  background-color: #fff;
  h1 {
    font-size: 0.36rem;
    color: #333;
    text-align: center;
    padding-top: 0.3rem;
  }
  .img-box {
    width: 5.6rem;
    margin: 1.5rem auto 0 auto;
    img {
      width: 100%;
      height: auto;
    }
  }
  p {
    font-size: 0.3rem;
    color: #666;
    line-height: 0.5rem;
    text-align: center;
    margin-top: 0.6rem;
  }
  .qrcode-box {
    text-align: center;
    margin-top: 1rem;
    img {
      width: 1.9rem;
      height: auto;
    }
    p {
      margin-top: 0.2rem;
      font-size: 0.28rem;
      color: #999;
      line-height: 0.42rem;
    }
  }
}
</style>
